<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <section>
      <div class="left">
        <van-cell
          v-for="(goods, index) in leftList"
          :key="index"
          @click="Jump(goods.proid)"
        >
          <img :src="goods.img1" />
          <p class="text">{{ goods.proname }}</p>
          <p class="money">￥{{ goods.originprice }}</p>
        </van-cell>
      </div>
      <div class="right">
        <van-cell
          v-for="(goods, index) in rightList"
          :key="index"
          @click="Jump(goods.proid)"
        >
          <img :src="goods.img1" />
          <p class="text">{{ goods.proname }}</p>
          <p class="money">￥{{ goods.originprice }}</p>
        </van-cell>
      </div>
    </section>
  </van-list>
</template>

<script>
export default {
  name: "GoodList",
  data() {
    return {
      limitNum: 5, //总共150
      loading: false,
      finished: false,
      refreshing: false,
      leftList: [],
      leftCount: 1,
      rightList: [],
      rightCount: 2,
    };
  },
  created() {
    this.render().then(
      this.$http.spread((left, right) => {
        if (left.data.code == "200") {
          this.leftList = left.data.data;
        }
        if (right.data.code == "200") {
          this.rightList = right.data.data;
        }
      })
    );
  },
  methods: {
    Jump(proid) {
      this.$router.push({ name: "GoodsDetail", params: { proid } });
    },
    onLoad() {
      this.leftCount += 2;
      this.rightCount += 2;
      this.render().then(
        this.$http.spread((left, right) => {
          if (left.data.code == "200") {
            this.leftList = this.leftList.concat(left.data.data);
          }
          if (right.data.code == "200") {
            this.rightList = this.rightList.concat(right.data.data);
          }
          this.loading = false;

          if (this.rightList.length >= 75 && this.leftList.length >= 75) {
            this.finished = true;
          }
        })
      );
    },
    getLeft() {
      return this.$http({
        url: "pro/list",
        params: {
          limitNum: this.limitNum,
          count: this.leftCount,
        },
      });
    },
    getRight() {
      return this.$http({
        url: "pro/list",
        params: {
          limitNum: this.limitNum,
          count: this.rightCount,
        },
      });
    },
    render() {
      return this.$http.all([this.getLeft(), this.getRight()]);
    },
  },
};
</script>

<style scoped>
.van-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.3125rem;
  flex-direction: column;
}
.van-list section {
  display: flex;
}
.left {
  width: 11.0625rem;
  display: flex;
  flex-direction: column;
  margin-right: 6px;
}

.right {
  width: 11.0625rem;
  display: flex;
  flex-direction: column;
}

.van-cell {
  padding: 0;
  text-align: center;
  background: white;
  border-radius: 0.625rem;
  margin: 5px 0;
}
.van-cell img {
  width: 11.0625rem;
}
.van-cell .text {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.875rem;
  padding: 0 0.625rem;
  margin: 5px 0 0;
  line-height: 1.25rem;
}
.van-cell .money {
  font-size: 1.25rem;
  padding: 0 0.625rem;
  color: #f66;
  margin-bottom: 0.625rem;
}
</style>